<style scoped>
  .icon-enter {
    font-size: .75rem;
  }

  .icon-xiangji {
    font-size: .9rem;
  }

  .flightRefundTicket {
    height: 100%;
    background-color: #f0f0f0;
  }

  .main {
    padding-top: 2.2rem;
    font-size: .75rem;
  }

  .item {
    padding: .75rem .5rem;
    background-color: #fff;
    line-height: 1rem;
    margin-top: .25rem;
  }

  .contacts {
    float: left;
  }

  .itemR {
    float: left;
    width:10.5rem;
  }

  .contacts {
    float: left;
    width:6.25rem;
  }

  .name {
    float: left;
    margin-right: .75rem;
  }

  .backRule {
    color: #0094db;
    padding: .75rem;
    width: 5rem;
  }

  .foot {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    line-height: 2.5rem;
    background-color: #0094db;
    font-size: .9rem;
    color: #fff;
    text-align: center;
  }
</style>
<!--退改签说明-->
<style scoped>
  .tui {
    font-size: .7rem;
    width: 15rem;
    padding: 0 .5rem .5rem;
    text-align: left;
    line-height: 1.15rem;
    min-height: 16.25rem;
  }

  .tui li {
    margin-top: .5rem;
  }

  .tuiTitle {
    padding: .5rem;
    text-align: center;
    border-bottom: 1px solid #ccc;
    font-size: .85rem;
  }

  .tuiL {
    float: left;
    width: 3.75rem;
  }

  .tuiR {
    float: left;
    width: 11.25rem;
  }
</style>

<!--退票人员-->
<style scoped>
  .backPeople{
    width: 100%;
    font-size: .75rem;
    line-height: 2.5rem;
  }

  .backPeople li{
    padding: 0 .5rem;
  }

  .noSel{
    color: red;
  }

  .backName{
    float: left;
    width: 12.5rem;
  }

  .check{
    float: right;
  }
  .icon-duihao{
    color: #0094db;
    width: 2.5rem;
    height: 2.5rem;
  }
</style>
/*/上传延误证明/*/
<style scoped>
  .file-box {
    position: relative;
    width: 12.5rem;
    text-align: right;
  }

  button {
    text-align: right;
  }

  .txt {
    width: 9.75rem;
    height: 2.5rem;
    font-size: .6rem;
  }

  .btn {
    height: 2.5rem;
    width: 1.5rem;
  }

  .file {
    position: absolute;
    top: 0;
    left: 0;
    filter: alpha(opacity:0);
    opacity: 0;
    width: 12.5rem;
    height: 2.5rem;
    /*z-index: 10;*/
    cursor: pointer;
  }

  .item-delay {
    padding: 0 .75rem;
    line-height: 2.5rem;
  }
</style>
<style type="text/scss" lang="scss">
  .upload{
    .upload-group{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .iconfont{
        transform: rotate(0deg);
        transition: all .5s;
        &.open{
          transform: rotate(90deg);
        }
      }
    }
    .update-show-img{
      height: 0;
      display: flex;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      overflow: hidden;
      transition: all .5s;
      >li{
        width: 22%;
        padding-top: 22%;
        margin-right: 4%;
        margin-bottom: 10px;
        position: relative;
        &:nth-child(4n) {
          margin-right: 0;
        }
        &>.iconfont{
          border-radius: 50%;
          position: absolute;
          right: 0;
          top: 0;
          transform: translate(47%, -50%);
          z-index: 99;
          color: #999;
          overflow: hidden;
          .iconfont:before{
            background: #fff;
            border-radius: 50%;
            width: 18px;
            height: 18px;
          }
        }
        img{
          position: absolute;
          left: 50%;
          top: 50%;
          width: 100%;
          height: 100%;
          transform: translate(-50%, -50%);
          border-radius: 4px;
          overflow: hidden;
        }
      }
    }
  }
  .preview-container{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 1s;
    z-index: 9999;
    background: rgba(0,0,0,.5s);
    padding: 20px;
    box-sizing: border-box;
    overflow: auto;
    img{
      width: 100%;
      height: 100%;
    }
  }
</style>
<template>
  <div class="flightRefundTicket">
    <headNav centerTitle="退票" @headBack="headBack"/>
    <div class="main">
      <ul>
        <li class="item fix">
          <div class="contacts">需要退票的航班</div>
          <div class="itemR">
            {{orderFlights[0].fromCityName}}-----{{orderFlights[0].toCityName}}
          </div>
        </li>
        <li class="item fix" @click="reasonShow=true">
          <div class="contacts">退票原因</div>
          <div class="r"><i class="iconfont icon-enter"></i></div>
          <div class="itemR ell">{{reason}}</div>
        </li>
        <li class="item fix upload" v-show="isUploadVisible" @click="onClickOpenUpload">
          <div class="upload-group">
            <div class="text">上传附件</div>
            <icon type="iconfont icon-enter" :class="{open: isOpenUpload}" size="1.3"/>
          </div>
          <ul class="update-show-img" :style="handleUploadSly">
            <li v-for="(img, index) in imgUrls" :key="img" @click.stop="onClickPreviewImg(img)">
              <icon type="iconfont icon-shanchu3" size="1.5" @click.native.stop="onClickDelImage(index)"/>
              <img :src="img">
            </li>
            <li class="upload-btn" @click.stop="onClickUpload">
              <img src="../../../assets/images/upload-image.png" style="width: 60px;height: 60px;">
              <input type="file"
                     multiple="multiple"
                     accept="image/jpeg,image/jpg,image/png"
                     ref="file"
                     @change="onFileChange"  style="display: none;">
            </li>
          </ul>
        </li>
       <!-- <li class="item fix item-delay">
          <div class="contacts">上传延误证明</div>
          &lt;!&ndash;上传延误证明&ndash;&gt;
          <div class="itemR">
            <div class="file-box">
              &lt;!&ndash;表单标签中设置enctype="multipart/form-data"来确保匿名上载文件的正确编码。&ndash;&gt;
              <form action="" method="post" enctype="multipart/form-data">
                <input type='text' name='textfield' id='textfield' class='txt' readonly/>
                <button class='btn' value="上传延误证明"><i class="iconfont icon-xiangji"></i></button>
                <input type="file" name="fileField" class="file" id="fileField" size="28"
                       onchange="document.getElementById('textfield').value=this.value"/>
                &lt;!&ndash;<input type="submit" name="submit" class="btn" value="上传" />&ndash;&gt;
              </form>
            </div>
          </div>
        </li>-->

        <li class="item fix" @click="backPeopleShow=true">
          <div class="contacts">退票人员</div>
          <div class="r"><i class="iconfont icon-enter"></i></div>
          <div class="itemR">{{passengersSelName}}</div>
        </li>
        <li class="item fix">
          <div class="contacts">联系人</div>
          <div class="name">{{contactor.name}}</div>
          <div class="r">
            <p>{{contactor.mobile}}</p>
            <p>{{contactor.email}}</p>
          </div>
        </li>
      </ul>
      <!--<div class="backRule" @click="alertShow=true">退改规则</div>-->
    </div>
    <div class="foot" @click="onClickRefundTicker">发起退票申请</div>
    <!--<confirm v-show="confirmShow" @confirmBtnR="confirmBtnR" :confirmInfo="ddd" @confirmBtnL="confirmBtnL"></confirm>-->
    <confirmOne v-show="confirmOneShow" @confirmOneBtn="confirmOneBtn" :confirmOneInfo="confirmOneInfo"></confirmOne>
    <alert v-show="alertShow" @alert="alertShow=false">
      <div class="tui">
        <div class="tuiTitle">退改签说明</div>
        <div>
          <ul>
            <li class="fix">
              <div class="tuiL">退票说明</div>
              <div class="tuiR">
                {{endorseRefundRules[0].outRemark}}
              </div>
            </li>
            <li class="fix">
              <div class="tuiL">改期说明</div>
              <div class="tuiR">
                {{endorseRefundRules[0].outRemark}}
              </div>
            </li>
            <li class="fix">
              <div class="tuiL">签转说明</div>
              <div class="tuiR">
                {{endorseRefundRules[0].endorseRule}}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </alert>
    <!--退票人员-->
    <mt-popup v-model="backPeopleShow" position="bottom" style="width: 100%">
      <div class="backPeople">
        <ul>
          <li v-for="item in passengers" class="fix" @click="peopleSel(item)">
            <div class="backName">{{item.name}}</div>
            <div class="check"><span v-show="item.appIsChecked"><i class="iconfont icon-duihao"></i></span></div>
            <div class="l">
              <span v-show="item.status == 'ISSUED' ">已出票</span>
              <span v-show="item.status == 'REFUND_IN_REVIEW' " class="noSel">退票审核中</span>
              <span v-show="item.status == 'REFUNDED' " class="noSel">已退票</span>
              <span v-show="item.status == 'CHANGE_IN_REVIEW' " class="noSel">改签审核中</span>
              <span v-show="item.status == 'CHANGED' " class="noSel">已改签</span>
              <span v-show="item.status == 'IN_CHANGE' " class="noSel">改签中</span>
            </div>
          </li>
        </ul>
      </div>
    </mt-popup>
    <!--退票原因-->
    <mt-popup v-model="reasonShow" position="bottom" class="backPeople">
      <div class="backPeople">
        <ul>
          <li v-for="item in reasons" class="fix" @click="reasonSel(item)">
            <div class="backName ell">{{item.reason}}</div>
            <div class="check"><span v-show="item.appIsChecked"><i class="iconfont icon-duihao"></i></span></div>
          </li>
        </ul>
      </div>
    </mt-popup>
    <div class="preview-container"
         v-show="previewUrl !== ''"
         :style="handlePreviewUrl"
         @click="onClickClosePreview">
      <img :src="previewUrl">
    </div>
  </div>
</template>
<script>
  import headNav from 'components/head.vue';
  import {Indicator} from 'mint-ui';
  import confirm from 'components/confirm.vue'
  import confirmOne from 'components/confirmOne.vue'
  import alert from 'components/alert.vue'
  import lrz from 'lrz'
  export default{
    data(){
      return {
        isUploadVisible: false,
        isOpenUpload: false,
        imgUrls: [],
        previewUrl: '',
        confirmShow: false,
        confirmOneShow:false,
        ddd: '是否确定发起退票申请?',
        confirmOneInfo:'',
        alertShow: false,
        backPeopleShow:false,
        reasonShow:false,
        reasons:[
          {
            reason:'我要改变出行计划，我不想飞了',
            appIsChecked:false
          },
          {
            reason:'填错姓名，选错日期，选错航班',
            appIsChecked:false
          },
          {
            reason:'航班延误或取消，航班时刻变更',
            appIsChecked:false
          },
          {
            reason:'身体原因且有二级甲等医院(含)以上的医院证明',
            appIsChecked:false
          },
        ]
      }
    },
    mounted(){

    },
    methods: {
      onClickUpload () {
        this.$refs.file.click()
      },
      onClickOpenUpload () {
        this.isOpenUpload = !this.isOpenUpload
      },
      onFileChange (e) {
        let files = e.target.files || e.dataTransfer.files;
        if(!files.length) return;
        // for (let i = 0; i<files.length; i++) {
        //   let reader = new FileReader();
        //   reader.readAsDataURL(files[i]);
        //   reader.onload =  (e) => {
        //     this.imgUrls.push(e.target.result)
        //   }
        // }
        this._createImage(files, e);
      },
      onClickDelImage (index) {
        this.imgUrls.splice(index, 1)
      },
      onClickPreviewImg (img) {
        this.previewUrl = img
      },
      onClickClosePreview () {
        this.previewUrl = ''
      },
      _createImage: function(files, e) {
        let vm = this;
        if (this.imgUrls.length + files.length > 8) {
          vm.$vux.toast.show({
            type: 'warn',
            width: '15em',
            text: '最多只能提交8张图片'
          });
          return false
        }
        for (let i = 0; i<files.length; i++) {
          lrz(files[i], { width: 480 }).then(function(rst) {
            vm.imgUrls.push(rst.base64);
            return rst;
          }).always(function() {
            // 清空文件上传控件的值
            e.target.value = null;
          });
        }
      },
      _saveImages (files) {
        let urlArr = [];
        let imgUrls = files;
        for(let i = 0; i < imgUrls.length; i++) {
          if(imgUrls[i].indexOf('file') === -1) {
            urlArr.push(imgUrls[i].split(',')[1]);
          } else {
            urlArr.push(imgUrls[i]);
          }
        }
        return imgUrls
      },
      onClickRefundTicker() {
        var that = this;
        this.$vux.confirm.show({
          content: '是否确定发起退票申请?',
          onConfirm () {
            that.onClickSubmit();
          }
        })
      },
      headBack(){
        this.$router.go(-1);
      },
      peopleSel(item){
        if(item.status == 'ISSUED'){
          item.appIsChecked = !item.appIsChecked;
        }else{

        }
        this.backPeopleShow = false;
      },
      reasonSel(item){
        if (item.reason === '航班延误或取消，航班时刻变更' || item.reason === '身体原因且有二级甲等医院(含)以上的医院证明') {
          this.isUploadVisible = true
        } else {
          this.isUploadVisible = false
        }
        for(var i=0 ;i<this.reasons.length ; i++){
          this.reasons[i].appIsChecked = false;
        }
        item.appIsChecked = !item.appIsChecked;
        this.reasonShow =  false;
      },
      confirmOneBtn(){
        this.confirmOneShow = false;

        if(this.passengersSel.length == 0){

        }else{
          this.$router.go(-1);
        }
      },
      confirmBtnL(){
        this.confirmShow = false;
      },
      onClickSubmit(){
        this.confirmShow = false;
        if(!this.reason){
          this.$vux.alert.show({
            content: '请选择退票原因',
          });
          return
        }
        if(this.passengersSel.length == 0){
          this.$vux.alert.show({
            content: '请选择退票人',
            onHide () {
            }
          })
        }else{
          var that = this;

          // 执行加载动画
          that.$vux.loading.show({
            text: '加载中...'
          });
          let form = new FormData();
          form.append('reason', this.reason);
          form.append('idArray', this.passengersSel);
          form.append('contactName', this.contactor.name);
          form.append('contactMobile', this.contactor.mobile);
          form.append('contactEmail', this.contactor.email);
          form.append('orderId', this.$route.query.orderId);
          if (this.isUploadVisible) {
            form.append('fileFields', this._saveImages(this.imgUrls));
          }
          this.$flight.refundTicket(form, res => {
            that.$vux.loading.hide();
            if(res.rs == true){
              that.confirmOneInfo= "退票申请成功，待审核.可致电客服400-010-5050";
            }else if(res.rs == false){
              that.confirmOneInfo = '退票失败'
            }
            that.confirmOneShow = true;
          }, fail => {
            console.log(fail)
          })

        }
      },
    },
    computed: {
      reason(){
        var ob = this.reasons.filter(todo => todo.appIsChecked);
        if(ob.length == 0){
          return '';
        }else{
          return ob[0].reason;
        }
      },
      orderId(){
        return this.$store.state.orderId;
      },
      flightRefundTicked(){
        return this.$store.state.flight.flightRefundTicked
      },
      contactor(){
        return this.$store.state.flight.flightRefundTicked.contactor
      },
      passengers(){
             for(var i=0; i<this.$store.state.flight.flightRefundTicked.passengers.length;i++){
               if(this.$store.state.flight.flightRefundTicked.passengers[i].status == undefined){
                 this.$store.state.flight.flightRefundTicked.passengers[i].status = '未出票'
               }
             }


        return this.$store.state.flight.flightRefundTicked.passengers
      },
      passengersSel(){//直接给后台
        var passengersSelArr=[];
        var ob = this.passengers.filter(todo => todo.appIsChecked);
        for(var i=0 ;i<ob.length;i++){
          passengersSelArr.push(ob[i].id)
        }
        console.log(passengersSelArr);
        return passengersSelArr
      },
      passengersSelName(){//页面显示
        var passengersSelArr=[];
        var ob = this.passengers.filter(todo => todo.appIsChecked);
        for(var i=0 ;i<ob.length;i++){
          passengersSelArr.push(ob[i].name)
        }
        return passengersSelArr.join()
      },
      orderFlights(){
        return this.$store.state.flight.flightRefundTicked.orderFlights
      },
      endorseRefundRules(){
        return this.$store.state.flight.flightRefundTicked.endorseRefundRules
      },
      handleUploadSly () {
        return {
          height: this.isOpenUpload ? 'auto' : 0,
          paddingTop: this.isOpenUpload ? '1rem' : '0',
          overflow: this.isOpenUpload ? 'inherit' : 'hidden'
        }
      },
      handlePreviewUrl () {
        let previewSly = {};
        if (this.previewUrl === '') {
          previewSly = {
            transform: 'translate(-50%, -50%) scale(0)'
          }
        } else {
          previewSly = {
            transform: 'translate(-50%, -50%) scale(1)'
          }
        }
        return previewSly
      }
    },
    watch: {

    },
    components: {headNav, confirm, alert,confirmOne},
  }
</script>

